@if (data$ | async; as data) {
  <div class="chart-box p-5 grid grid-cols-12 sm:gap-2 justify-center items-end">
    <div class="col-span-12 sm:col-span-6 flex flex-col justify-center items-center sm:items-start">
      <div class="title mat-h3 one-line" [attr.data-path]="'label'" contentedit="label">
        {{ data.label }}
      </div>
      <div class="count one-line">
        {{ data.total }}
      </div>
    </div>
    @if (showChart()) {
      <app-chart class="col-span-12 sm:col-span-6" [content]="data.chart" [style]="style" />
    }
  </div>
}
